<template>
  <div style="height: 100%">
    <div class="bg_wrap" style="padding:30px;height: 100%">
      <a-card :bordered="false" style="width: 400px;margin: auto;height:500px">
    <a-tabs default-active-key="1" @change="callback">
      <a-tab-pane key="1" tab="登录">
        <div style="width:300px;margin:50px auto;">
          <a-input v-model="username" prefix="🙎‍♀" placeholder="用户名/邮箱" size="large"/>

          <br>
          <br>

          <a-input-password v-model="password" prefix="🔒" placeholder="密码" size="large"/>

          <br>
          <br>

          <a-button @click="ulogin" type="primary" block class="input" style="height: 40px">
            登录
          </a-button>

          <router-link to="./ResetPassword" target="_blank">
            <a style="width: 100%;text-align: right;line-height:35px;cursor:pointer;display: inline-block">重置密码</a>
          </router-link>
        </div>
      </a-tab-pane>

      <a-tab-pane key="2" tab="注册" force-render>
        <div style="width:300px;margin:20px auto;text-align: left">
          <a-input v-model="username" prefix="🙎‍♀" placeholder="用户名" size="large"/>

          <br>
          <br>

          <a-input v-model="email" prefix="📫" placeholder="邮箱" size="large"/>

          <br>
          <br>

          <a-input-password v-model="password" prefix="🔒" placeholder="密码" size="large"/>

          <br>
          <br>

          <a-input-password style="" v-model="rePassword" prefix="🔒" placeholder="确认密码" size="large"/>
          <div v-show="password!==rePassword" style="display:inline-block;width: 100%;text-align: center;color: red">
            两次密码不一致
          </div>
          <br>
          <br>

          <a-button @click="uregister" type="primary" block class="input" style="height: 40px">
            注册
          </a-button>
        </div>
      </a-tab-pane>

    </a-tabs>
      </a-card>
    </div>
  </div>
</template>
<script>
    import md5 from 'js-md5';
    import {register,login} from '../api/api'
    export default {
        name: "UserLogRegi",
        data() {
            return {
                username:"",
                email:"",
                password:"",
                rePassword:""
            };
        },
        methods: {
            callback(key) {
                console.log(key);
            },
            uregister(){//用户注册

                if(this.password !== this.rePassword){
                    this.$message.error("两次密码不一致!");
                    return;
                }
                let obj = {};
                obj.username = this.username;
                obj.password = md5(this.password);
                obj.email = this.email;
                var loginArr = [];
                loginArr.push(obj);

                register(JSON.stringify(loginArr)).then(data => {
                    if(data.code==200){
                        this.$message.success("注册成功！");
                        setTimeout(() => {
                            this.input_title = "";
                            this.handbook = "";
                        }, 1000)
                    }else{
                        if(data.msg){
                            this.$message.error(data.msg);
                            return;
                        }
                        this.$message.error("注册失败!")
                    }
                })
            },
            ulogin(){//用户登录
                // console.log(md5(this.password));
                let obj = {};
                obj.username = this.username;
                obj.password = md5(this.password);
                var loginArr = [];
                loginArr.push(obj);

                login(JSON.stringify(loginArr)).then(data => {
                    if(data.code==200){
                        this.$message.success("登录成功！");
                        setTimeout(() => {
                            this.input_title = "";
                            this.handbook = "";
                        }, 1000);
                        localStorage.setItem("uid",data.id);//存用户id
                        localStorage.setItem("username",data.username);//存用户名
                        this.$router.replace('/')
                        // let routeUrl = this.$router.resolve({
                        //     path: '/',
                        //     // query: {uid:data.id}
                        // });
                        // window.open(routeUrl.href, '_self');

                    }else{
                        if(data.msg){
                            this.$message.error(data.msg);
                            return;
                        }
                        this.$message.error("登录失败!")
                    }
                })
            }
        },
    };
</script>


<style scoped>

  .bg_wrap{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /*background: url(../assets/login7.gif);*/
    background: #f8f8f8;
    background-repeat: no-repeat;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
  }
</style>
